<script setup lang="ts">
import type { FolderProps } from '@/types';

import { Icon } from '@/components/core/icon';

import { ElButton, ElEmpty, ElSkeleton } from 'element-plus';

defineOptions({
  name: 'FolderGrid',
});
const { layoutKey, list } = defineProps({
  layoutKey: {
    default: 'grid-small',
    type: String,
  },
  loading: {
    default: false,
    type: Boolean,
  },
  list: {
    default: () => [],
    type: Array<FolderProps>,
  },
});
const emits = defineEmits(['itemDbClick', 'resume']);
const onItemDbClick = (item: FolderProps) => {
  emits('itemDbClick', item);
};
const onResume = () => {
  emits('resume');
};
</script>
<template>
  <div v-if="loading" class="layout-empty-grid">
    <div class="w-full p-4 text-center" colspan="5">
      <ElSkeleton :rows="8" animated />
      <p class="mt-4 text-center text-gray-500">
        搜索耗时过长，建议修改关键词重新搜索
      </p>
      <ElButton class="mt-4" size="small" type="primary" @click="onResume">
        取消
      </ElButton>
    </div>
  </div>
  <div v-else-if="list.length === 0" class="layout-empty-grid">
    <ElEmpty description="此文件夹为空。" />
  </div>
  <div
    v-else
    :class="[
      { small: layoutKey === 'grid-small' },
      { middle: layoutKey === 'grid-middle' },
      { large: layoutKey === 'grid-large' },
    ]"
    class="layout-grid"
  >
    <div
      v-for="(item, index) in list"
      :key="index"
      :class="[{ checked: item.checked }]"
      class="grid-item"
      @click="item.checked = !item.checked"
      @dblclick="onItemDbClick(item)"
    >
      <Icon
        :class="item.type === '2' ? 'folder' : 'file'"
        :icon="item.icon"
      />
      <div :title="item.name" class="name">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
